<template>
  <div class="lookAround">
    <div class="searchBox" @click="goSearch">
      <van-search
        v-model="searchVal"
        style="flex: 1 !important"
        input-align="left"
        placeholder="搜附近"
        class="search_Input_box"
        background="transparent"
      />
    </div>
    <div class="map" id="mapSituation"></div>
    <div
      class="main_body"
      :class="develop ? 'main_body_open' : 'main_body_down'"
    >
      <div class="touch_down_icon" @click="touchDown" v-if="develop">
        <img src="~img/lookAround/touch_down.png" alt="" />
      </div>
      <div class="touch_down_icon" @click="touchUp" v-if="!develop">
        <img src="~img/lookAround/touch_up.png" alt="" />
      </div>
      <div class="enterprise_classification_box">
        <div class="enterprise_classification">
          <div class="enterprise_box" @click="goFilter('bigCorp')">
            <div class="enterprise_icon">
              <img src="~img/lookAround/peanuts.svg" alt="" />
            </div>
            <div>小微企业</div>
          </div>
          <div class="enterprise_box" @click="goFilter('isTrade')">
            <div class="enterprise_icon">
              <img src="~img/lookAround/foreign_trade_enterprise.png" alt="" />
            </div>
            <div>外贸企业</div>
          </div>
          <div class="enterprise_box" @click="goFilter('isGoats')">
            <div class="enterprise_icon">
              <img src="~img/lookAround/gazelle_nterprise.png" alt="" />
            </div>
            <div>瞪羚企业</div>
          </div>
          <div class="enterprise_box" @click="goFilter('technology')">
            <div class="enterprise_icon">
              <img src="~img/lookAround/technology_enterprises.svg" alt="" />
            </div>
            <div>科技型企业</div>
          </div>
          <div class="enterprise_box">
            <div class="enterprise_icon">
              <img src="~img/lookAround/advanced_filtering.svg" alt="" />
            </div>
            <div>高级筛选</div>
          </div>
        </div>
        <div class="nav_box">
          <div class="headline" @click="ceshi">
            <div class="headline_left">
              <div class="fixed_position_icon">
                <img src="~img/lookAround/fixed_position_icon.svg" alt="" />
              </div>
              <div class="title_margin_left">国际大厦</div>
              <div class="title_margin_left">
                <img src="~img/lookAround/right_arrow_right.svg" alt="" />
              </div>
            </div>
            <div class="title_margin_right">
              共发现<span class="enterprise_number">{{ total }}</span
              >家企业
            </div>
          </div>
          <div class="distance_box">
            <van-tabs :swipeable="true" line-width="0px" @change="condition1">
              <!-- <van-tab title="" v-if="false"></van-tab> -->
              <van-tab title="附近500m" name="1"></van-tab>
              <van-tab title="附近1km" name="2"></van-tab>
              <van-tab title="营收500万-1000万" name="3"></van-tab>
              <van-tab title="营收1000万以上" name="4"></van-tab>
              <van-tab title="外贸进口增长" name="5"></van-tab>
              <van-tab title="外贸出口增长" name="6"></van-tab>
              <van-tab title="资产负债率50%-100%" name="7"></van-tab>
              <van-tab title="专利发明增加" name="8"></van-tab>
              <van-tab title="外贸出口增长" name="9"></van-tab>
            </van-tabs>
          </div>
          <div class="distance_box2">
            <van-tabs :swipeable="true" line-width="0px" @click="condition2">
              <van-tab title="重点产业"></van-tab>
              <van-tab title="电子信息"></van-tab>
              <van-tab title="数字经济"></van-tab>
              <van-tab title="高端装备制造"></van-tab>
              <van-tab title="生物医药"></van-tab>
              <van-tab title="集成电路"></van-tab>
              <van-tab title="汽车零部件"></van-tab>
              <van-tab title="先进材料"></van-tab>
              <van-tab title="软件服务"></van-tab>
              <van-tab title="航空航天"></van-tab>
            </van-tabs>
          </div>

          <!-- ================== -->
          <!-- <van-list
            class="listBox"
            @load="onLoad"
            v-model="loading"
            :finished="finished"
            finished-text="没有更多了"
          >
            <corpList :originList="originList"></corpList>
            <van-loading
              type="spinner"
              v-if="originList.length == 0"
              style=""
            />
          </van-list> -->
          <div ref="mescroll" class="listBox">
            <corpList :originList="originList"></corpList>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { lookAroundV2, fullAmountCorp } from "@/interfaces/lookAround/index.js";
import corpList from "../../components/lookAround/corpList.vue";
import mapConfig from "./mixins/mapConfig";
import MeScroll from "mescroll.js";
import "mescroll.js/mescroll.min.css";
export default {
  name: "",
  /*1. Vue扩展 */
  extends: "", // extends和mixins都扩展逻辑，需要重点放前面
  mixins: [mapConfig],
  components: {
    corpList,
  },
  /* 2. Vue数据 */
  props: {},
  model: { prop: "", event: "" }, // model 会使用到 props
  data() {
    return {
      mescroll: null,
      mapIshow: true,
      develop: true,
      distance: 0.5,
      pageNum: 1,
      pageSize: 20,
      extraObj: {},
      total: 0,
      originList: [],
      loading: false,
      searchVal: "",
      finished: false,
    };
  },
  computed: {},
  watch: {
    develop: {
      handler(e) {
        console.log(e, "监听成功");
        if (e) {
          let that = this;
          setTimeout(function (name, gender) {
            console.log("开始移动");
            that.mapInstance.panBy(0, -280);
          }, 500);
        } else {
          let that = this;
          setTimeout(function (name, gender) {
            console.log("开始移动");
            that.mapInstance.panBy(0, 280);
          }, 500);
        }
      },
    },
  }, // watch 监控的是 props 和 data，有必要时监控computed
  /* 3. Vue资源 */
  filters: {},
  directives: {},
  /* 4. Vue生命周期 */
  created() {
    this.getList();
    let that = this;
    setTimeout(function (name, gender) {
      console.log("开始移动");
      that.mapInstance.panBy(0, -280);
    }, 0);
  },
  mounted() {
    let that = this;
    this.$nextTick(() => {
      that.initMap();
    });
    // 创建MeScroll对象:为避免配置的id和父组件id重复,这里使用ref的方式初始化mescroll
    this.mescroll = new MeScroll(this.$refs.mescroll, {
      // 在mounted生命周期初始化mescroll,以确保您配置的dom元素能够被找到.
      // down: {
      // 	auto: false, // 是否在初始化完毕之后自动执行下拉回调callback; 默认true
      // 	callback: this.downCallback, // 下拉刷新的回调
      // },
      up: {
        auto: true, // 是否在初始化时以上拉加载的方式自动加载第一页数据; 默认false
        callback: this.upCallback, // 上拉回调,此处可简写; 相当于 callback: function (page) { upCallback(page); }
        page: {
          num: 0, // 当前页码,默认1,回调之前会加1,即callback(page)会从1开始
          size: 10, // 每页数据的数量
        },
        noMoreSize: 5000, // 如果列表已无数据,可设置列表的总数量要大于等于5条才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看
        // toTop: {
        //   // 配置回到顶部按钮
        //   src: require("../../assets/imgs/marketingExtension/go_top.svg"),
        //   offset: 1000,
        // },
      },
    });
  },
  destroy() {},
  /* 5. Vue方法 */
  methods: {
    // 条件查询
    goFilter(e) {
      this.$router.push({
        path: "/filterCompany",
        query: { type: e },
      });
    },
    // 跳转搜索页面
    goSearch() {
      this.$router.push({
        path: "/searchEnterprise",
      });
    },

    touchDown() {
      // console.log('3333')
      this.develop = false;
      // let that = this;
      // setTimeout(function () {
      //   that.initMap();
      //   that.pushMarker();
      // }, 1000); // 定时时间
    },
    touchUp() {
      this.develop = true;
    },
    // 筛选条件1
    condition1(e, title) {
      console.log(e, title, "22");

      this.extraObj = {};
      let params = {};
      if (title == "附近500m") {
        console.log("33");
        params = {
          distance: 0.5,
        };
      } else if (title == "营收500万-1000万") {
        params = {
          businessIncomeLowerLimit: "500",
          businessIncomeUpperLimit: "1000",
        };
      } else if (title == "营收1000万以上") {
        params = {
          businessIncomeLowerLimit: "1000",
          businessIncomeUpperLimit: "50000",
        };
      } else if (title == "有融资需求企业") {
        params = {
          isLoan: "1",
        };
      } else if (title == "未结清信贷企业") {
        params = {
          qutstandingLoans: "1",
        };
      } else if (title == "未结清小额贷款企业") {
        params = {
          qutstandingSmallLoans: "1",
        };
      } else if (title == "纳税A级企业") {
        params = {
          taxALeavel: "1",
        };
      } else if (title == "用水企业") {
        params = {
          isWater: "1",
        };
      } else if (title == "用电企业") {
        params = {
          isElec: "1",
        };
      } else if (title == "缴纳社保企业") {
        params = {
          isSecurity: "1",
        };
      } else if (title == "缴纳公积金企业") {
        params = {
          isFund: "1",
        };
      } else if (title == "附近1km") {
        params = {
          distance: 1.0,
        };
      } else if (title == "外贸进口增长") {
        params = {
          importTrend: "1",
        };
      } else if (title == "外贸出口增长") {
        params = {
          exportTrend: "1",
        };
      } else if (title == "资产负债率50%-100%") {
        params = {
          debtLowerLimit: "50",
          debtUpperLimit: "100",
        };
      } else if (title == "专利发明增加") {
        params = {
          patentTrend: "1",
        };
      } else if (title == "国有银行有贷") {
        params = {
          loanStateBank: "1",
        };
      } else if (title == "有小额贷款") {
        params = {
          smallLoan: "1",
        };
      }
      this.extraObj = params;
      this.originInfo();
    },
    // 筛选条件2
    condition2(e, title) {
      const params = {
        keyIndustries: title === "重点产业" ? "" : title + "产业",
      };
      this.extraObj = params;
      console.log(this.extraObj);
      this.originInfo();
    },
    // 列表接口
    async getList() {
      this.finished = false;
      this.total = 0;
      const params = {
        distance: "0.5",
        needToken: true,
        pageBO: {
          pageSize: this.pageSize,
          pageNum: this.pageNum,
        },

        __proto__: Object,
        sortColumn: "creditScore",
        sortRule: "desc",
        userLat: 31.26839516978756,
        userLng: 120.63862787231987,
      };
      const res = await lookAroundV2({ ...params, ...this.extraObj });
      console.log(res, "res");
      console.log(this.pageNum, "pageNmu");
      let { list, total } = res;
      if (this.pageNum <= res.pages) {
        // ==========================================
        // 设置不同的标题背景色
        for (let i in list) {
          let color = "#D99D9A";
          if (i % 4 === 0) {
            color = "#8BCBB8";
          } else if (i % 3 === 0) {
            color = "#99C1F2";
          } else if (i % 5 === 0) {
            color = "#B8AAD6";
          } else {
            color = "#D99D9A";
          }
          this.$set(list[i], "background", color);
        }
        // =======================================================
        this.originList = this.originList.concat(list);
        this.pushMarker();
        this.total = total;
        this.loading = false;
      } else {
        this.finished = true;
      }
    },
    ceshi() {
      console.log("aa");
    },
    // 列表滚动到底部
    onLoad() {
      this.loading = true;
      console.log(1);
      this.pageNum = this.pageNum + 1;
      this.getList();
    },
    // 初始化
    originInfo() {
      this.pageNum = 1;
      this.originList = [];
      this.getList();
    },
    /* 下拉刷新的回调 */
    downCallback() {
      console.log("自动下拉刷新 ");
      // console.log('this.mescroll.version=' + this.mescroll.version);
      // 联网加载数据

      this.getListDataFromNet(
        1,
        20,
        (data) => {
          console.log(data, "data");
          this.originList = data;
          // 数据渲染成功后,隐藏下拉刷新的状态
          this.$nextTick(() => {
            this.mescroll.endSuccess(0); // 结束下拉刷新,无参
          });
        },
        () => {
          // 联网失败的回调,隐藏下拉刷新的状态
          this.mescroll.endErr();
        }
      );
    },
    // 上拉回调 page = {num:1, size:10}; num:当前页 ,默认从1开始; size:每页数据条数,默认10
    upCallback(page) {
      console.log("下拉了");
      // console.log('自动上拉记载');
      // 联网加载数据
      this.getListDataFromNet(
        page.num,
        20,
        (curPageData) => {
          // 添加列表数据
          if (page.num == 1) {
            this.originList = curPageData;
          } else {
            this.originList = this.originList.concat(curPageData);
          }
          // 数据渲染成功后,隐藏下拉刷新的状态
          this.$nextTick(() => {
            this.mescroll.endSuccess(curPageData.length);
          });
        },
        () => {
          // 联网失败的回调,隐藏下拉刷新和上拉加载的状态;
          this.mescroll.endErr();
        }
      );
    },
    async getListDataFromNet(
      pageNum,
      pageSize,
      successCallback,
      errorCallback
    ) {
      // 上拉加载返回的数据

      const params = {
        distance: "0.5",
        needToken: true,
        pageBO: {
          pageSize: this.pageSize,
          pageNum: pageNum,
        },

        __proto__: Object,
        sortColumn: "creditScore",
        sortRule: "desc",
        userLat: 31.26839516978756,
        userLng: 120.63862787231987,
      };
      console.log(params, "paramsparams");
      const res = await lookAroundV2({ ...params, ...this.extraObj });

      // =======================================================
      //  公司简称背景色设置
      let { list, total } = res;
      for (let i in list) {
        let color = "#D99D9A";
        if (i % 4 === 0) {
          color = "#8BCBB8";
        } else if (i % 3 === 0) {
          color = "#99C1F2";
        } else if (i % 5 === 0) {
          color = "#B8AAD6";
        } else {
          color = "#D99D9A";
        }
        this.$set(list[i], "background", color);
      }
      // =======================================================
      console.log(res,'res数据')
      successCallback && successCallback(res.list);
      this.pushMarker();

      console.log(this.originList, "列表数据");
    },
  }, // all the methods should be put here in the last
};
</script>
<style scoped lang="scss">
.lookAround {
  // background-color: #74bdd7;
  position: absolute;
  bottom: 0;
  top: 0;
  left: 0;
  right: 0;
}
.searchBox {
  width: 100%;
  position: fixed;
  top: 3px;
  z-index: 99;
}
.van-search__content {
  background-color: white;
  border-radius: 7px;
}
::v-deep .van-icon {
  font-size: 20px !important;
}
.map {
  width: 100%;
  // height: 22%;
  height: 100%;
  background-color: white !important;
}
.map2 {
  width: 100%;
  height: 100%;
}
::v-deep .amap-logo {
  display: none !important;
}
::v-deep .amap-copyright {
  display: none !important;
}

.main_body {
  height: 81%;
  width: 100%;
  // margin-top: -2%;

  display: flex;
  flex-flow: column;
  transition: all 0.6s;
}
.main_body_open {
  // overflow: hidden;
  position: absolute;
  bottom: 0;
  height: 81%;
  transition: all 0.6s;
}
.main_body_down {
  height: 100px;
  overflow: hidden;
  position: absolute;
  bottom: 0;
  transition: all 0.6s;
}
.enterprise_classification_box {
  background-color: #f1f6f9;
  border-radius: 12px 12px 0 0;
  display: flex;
  flex-flow: column;
  overflow: auto;
}
.enterprise_classification {
  padding: 0 10px;
  height: 80px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  // background-color: red;
}
.enterprise_box {
  text-align: center;
  font-size: 13.3px;
  font-family: PuHuiTi65;
  // margin-left: 10px;
}
.enterprise_icon {
  img {
    // width: 30px;
    height: 28px;
  }
}
.nav_box {
  width: 100%;
  flex: 1;
  background-color: white;
  border-radius: 12px 12px 0 0;
  display: flex;
  flex-flow: column;
  overflow: hidden;
  // padding: 0 10px;
}
.headline {
  display: flex;
  justify-content: space-between;
  padding: 5px 10px 0 10px;
  margin-top: 7px;
  // background-color: red;
}
.headline_left {
  display: flex;
}
.title_margin_left {
  margin-left: 5px;
  font-weight: bold;
  font-size: 17px;
  img {
    width: 10px;
    margin-top: 7.5px;
  }
}
.title_margin_right {
  font-size: 13.3px;
  line-height: 25px;
  font-family: "PuHuiTi65";
}
.enterprise_number {
  color: #da4a39;
}
.distance_box {
  padding: 0 10px;
  margin-top: 7px;
  ::v-deep .van-tab {
    border: 1px solid #c1c1c1;
    border-radius: 5px;
    height: 24px;
    padding: 0 10px;
    margin-right: 10px;
  }
  ::v-deep .van-tab__text {
    font-size: 12.67px;
  }
  ::v-deep .van-tab--active {
    background-color: #3282e4;
    color: white;
    border: 0;
  }
  ::v-deep .van-tabs__nav--line {
    padding-bottom: 0;
  }
  ::v-deep .van-tabs__nav--line.van-tabs__nav--complete {
    padding-left: 0 !important;
  }
  ::v-deep .van-tabs--line {
    height: 33px;
  }
}
.distance_box2 {
  padding: 0 10px;
  height: 28px;
  ::v-deep .van-tab {
    border-radius: 10px;
    height: 24px;
    padding: 0 10px;
    margin-right: 10px;
    background-color: #f3f3f3;
  }
  ::v-deep .van-tab__text {
    font-size: 12.67px;
  }
  ::v-deep .van-tab--active {
    background-color: #e4efff;
    color: #3282e4;
    font-size: 12.67px;
    border: 0;
  }
  ::v-deep .van-tabs__nav--line {
    padding-bottom: 0;
  }
  ::v-deep .van-tabs__nav--line.van-tabs__nav--complete {
    padding-left: 0 !important;
    height: 25px;
  }
}
.touch_down_icon {
  text-align: center;
  img {
    width: 30px;
  }
}
.fixed_position_icon {
  img {
    width: 14px;
    height: 17px;
    margin-top: 3px;
  }
}
.listBox {
  overflow: auto;
  flex: 1;
  background-color: white;
  min-height: 465px;
}
.van-loading {
  text-align: center;
  line-height: 200px;
}
.mescroll {
  // position: relative;
  // height: 100vh;
  // padding-top: 110px;
  position: fixed;
  top: 110px;
  bottom: 0;
  height: auto; /*如设置bottom:50px,则需height:auto才能生效*/
  // position: absolute;
  // top: 104px;
  // bottom: 0px;
  // left: 0px;
  // right: 0px;
  // bottom: 0px;
  // border: 1px solid red;
  overflow-x: hidden;
  z-index: 100;
}
</style>
